<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			@media all  and (min-width:1000px ) {
				body:before{
					content: "你的设备不支持你的设备不支持"; 
				}
				body>*{
					display: none;
				}
			}
			
				
			@media all and (min-width: 750px) and (max-width: 1000px) {
				*{
					padding: 0;
					margin: 0;
					list-style: none;
				}
				.one li{
					height: 50px;
					background: linear-gradient(0deg,#fff,red 50%,#fff 100%);
					border: 1px solid #CCCCCC;
					line-height: 50px;
					text-align: center;
				}
				body{
					display: flex;
				}
				.one{
					border: 1px solid #ccc;
					width:30%;
					height:500px;
					float: left;
					
				}
				.one:nth-child(2){
					width: 40%;
					
				}
				.one img{
					width: 100%;
				}
			}
			@media  all and (max-width:750px) {
				*{
					margin: 0;
					padding: 0;
					list-style: none;
				}
				body{
					display: flex;
					-webkit-flex-direction: column;
				}
				.one{
					border: 1px solid #ccc;
					width: 100%;
					display: flex;
					-webkit-flex-direction: column;
				}
				.one img{
					width: 100%;
					height: 100%;
				}
				.one li{
					background: linear-gradient(0deg,#fff,red 50%,#fff 100%);
					border: 1px solid #CCCCCC;
					height: 35px;
					text-align: center;
				}
			}
		</style>
	</head>
	<body>
		<div class="one">
			<ul>
				<li>导航菜单1</li>
				<li>导航菜单2</li>
				<li>导航菜单3</li>
				<li>导航菜单4</li>
				<li>导航菜单5</li>
				<li>导航菜单6</li>
			</ul>
		</div>
		<div class="one">
			<img src="img/fengche.png"/>
		</div>
		<div class="one">
			<ul>
				<li>广告位1</li>
				<li>广告位2</li>
			</ul>
		</div>
	</body>
	
</html>
